<template>
	<view>
		<view class="nav-bar">
			<NavBar background="transparent">
				<navigator open-type="navigateBack" hover-class="none" class="nav-icon" slot="left">
					<image src="/static/goods-nav-back.png" class="back-icon"></image>
				</navigator>
				<view class="nav-icon" slot="right">
					<image src="/static/goods-nav-share.png" class="share-icon"></image>
				</view>
			</NavBar>
		</view>

		<view v-if="entity.swiperList" class="swiper-view">
			<swiper class="swiper-css" @change="(event) => swiperIndex = event.detail.current">
				<swiper-item v-if="entity.videoUrl" :key="entity.videoUrl">
					<view class="video-item-IOS" v-html='`
						<video class="video-js" style="object-fit: contain; width:100%; height: 100%;overflow: hidden;background: #000000;" 
								data-setup="{}"
								webkit-playsinline="true"
								playsinline="true"
								x5-video-player-type="h5"
								x5-video-orientation="portraint"
								poster="${IMG_URL}${entity.videoUrl}?x-oss-process=video/snapshot,t_0,f_jpg"
								controls preload="auto" loop controlslist="nofullscreen nodownload noremoteplayback">
								<source id="source" src="${IMG_URL}${entity.videoUrl}">
						</video>
					`'>
					</view>
				</swiper-item>
				<swiper-item v-for="(item, index) in entity.swiperList " :key="index">
					<image :src="`${item}`" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dot">
				<view v-for="(item, index) in entity.videoUrl ? entity.swiperList.length + 1 : entity.swiperList.length"
					:key="index" class="dot-item" :class="{'dot-active':index == swiperIndex}">
				</view>
			</view>
			<view class="swiper-dot">
				{{swiperIndex + 1}} / {{entity.videoUrl ? entity.swiperList.length + 1 : entity.swiperList.length}}
			</view>
		</view>
		<view class="card-view">
			<view class="goods-price">
				<view class="price-text">
					<view>{{skuItem.redeemPoints || 0}}</view>
					<view class="price-unit">积分</view>
				</view>
				<view class="price-tag">
					<image src="/static/credits-exchange.png" class="tag-image"></image>
					<view>已兑换 {{skuItem.exchangeNum || 0}}</view>
				</view>
			</view>
			<view class="options-view">
				<view>价值：￥{{skuItem.marketPrice || 0}}</view>
				<view>剩余 {{skuItem.stock || 0}}</view>
			</view>
			<view class="goods-name">{{entity.name}}</view>
			<view class="goods-desc">{{skuItem.sellPoint}}</view>
		</view>
		<view class="card-view">
			<view class="card-title">规格</view>
			<view class="specification-view">
				<view v-for="(item, index) in entity.skuList" :key="index" class="specification-item" @click="onSkuEvent(item)"
					:class="{'specification-active': skuItem.skuId == item.skuId}">{{item.skuName}}</view>
			</view>
		</view>
		<view class="card-view">
			<view class="card-title">详情</view>
		</view>
		<rich-text :nodes="entity.content"></rich-text>
		<view style="height: 260upx;"></view>
		<FloatView>
			<view class="button-view">
				<view class="options-view">
					<view class="options-desc">兑换数量</view>
					<view class="options-content">
						<view class="options-item" @click="onSubtraction">-</view>
						<view class="options-number">{{goodsNumber}}</view>
						<view class="options-item" @click="onAddition">+</view>
					</view>
				</view>
				<view class="button-item" @click="onSubmit">立即兑换</view>
			</view>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				swiperIndex: 0,
				goodsNumber: 1,
				entity: {
					swiperList: [],
					spuId: "",
					name: "",
					coverImg: "",
					videoUrl: "",
					sellPoint: "",
					content: "",
					marketPrice: null,
					redeemPoints: null,
					stock: null,
					exchangeNum: null,
					skuList: []
				},
				skuItem: {
					skuId: "", // 规格ID
					spuId: "", // 商品ID
					skuName: "", // 规格名称
					redeemPoints: 0, // 兑换所需积分
					marketPrice: 0, // 市场价值
					stock: 0, // 库存
					exchangeNum: 0, // 已兑换数量
					limited: 0, // 限购数量
				}
			};
		},
		onLoad(options) {
			this.detailId = options.detailId
		},
		onShow() {
			this.getRequestDetail()
		},
		methods: {
			onSubmit() {
				const param = `?spuId=${this.skuItem.spuId}&skuId=${this.skuItem.skuId}&quantity=${this.goodsNumber}`
				uni.navigateTo({
					url: '/pages/exchangeGoods/exchangeGoods' + param
				})
			},
			/**
			 * 切换规格
			 */
			onSkuEvent(item) {
				if (this.skuItem.skuId == item.skuId) return
				this.skuItem = item
				this.goodsNumber = 1
			},
			async getRequestDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getGoodsDetail(this.detailId).finally(uni.finally)
				res.data.swiperList = this.getImage(res.data)
				if (res.data.skuList && res.data.skuList.length) this.skuItem = res.data.skuList[0]
				this.entity = res.data
			},
			getImage(entity) {
				const strArr = entity.coverImg.split(',')
				if (!strArr.length) return []
				const list = strArr.map(item => `${this.IMG_URL}${item}`)
				// if (entity.videoUrl) {
				// 	list.push({
				// 		type: 2,
				// 		src: `${this.IMG_URL}${entity.videoUrl}`
				// 	})
				// }
				return list
			},

			onSubtraction() {
				if (this.goodsNumber - 1 < 1) return
				this.goodsNumber -= 1
			},
			onAddition() {
				if (this.skuItem.limited && this.goodsNumber >= this.skuItem.limited) {
					return uni.$util.showToast(`${this.skuItem.skuName} 限购 ${this.skuItem.limited}`)
				}
				this.goodsNumber += 1
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-icon {
			width: 58upx;
			height: 58upx;
			@extend .column;
			background: rgba($color: #000000, $alpha: 0.42);
			border-radius: 7rpx;

			.back-icon {
				width: 33upx;
				height: 33upx;
			}

			.share-icon {
				@extend .back-icon;
			}
		}


	}

	.swiper-view {
		width: 100%;
		height: 748upx;
		position: relative;

		.swiper-css {
			width: 100%;
			height: 100%;

			.video-item-IOS {
				width: 100%;
				height: 100%;
				background: #000000;

				.video-item-IOS-image {
					width: 100%;
					height: 100%;
				}

				.video-js {
					video::-webkit-media-controls-fullscreen-button {
						display: none !important;
					}
				}
			}

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot {
			padding: 5upx 9upx;
			background: rgba(6, 0, 0, 0.9);
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			z-index: 1;
			left: 22upx;
			bottom: 22upx;
		}
	}

	.card-view {
		width: 100%;
		padding: 20upx 27upx;
		padding-bottom: 22upx;
		background: white;

		.card-title {
			position: relative;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2C1101;

			&:before {
				content: "";
				width: 56rpx;
				height: 14rpx;
				background: rgba(255, 38, 21, 0.1);
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}

		.specification-view {
			width: calc(100% + 18upx);
			margin-left: -18upx;
			@extend .row-start;

			.specification-item {
				padding: 11upx 31upx;
				border-radius: 7rpx;
				border: 1rpx solid #F3D7D7;
				font-size: 25rpx;
				font-weight: 400;
				color: #2C1101;
				margin-left: 18upx;
				margin-top: 18upx;
			}

			.specification-active {
				border: 1rpx solid #FF2615;
				color: #FF2615;
			}
		}

		.goods-price {
			width: 100%;
			@extend .row-between;

			.price-text {
				@extend .row;
				align-items: baseline;
				font-size: 43rpx;
				font-weight: 600;
				color: #EA3918;

				.price-unit {
					font-size: 22rpx;
					margin-left: 10upx;
				}
			}

			.price-tag {
				@extend .row;
				padding: 8upx 18upx;
				background: #FF2615;
				border-radius: 24rpx;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				.tag-image {
					width: 27upx;
					height: 25upx;
					margin-right: 11upx;
				}
			}
		}

		.options-view {
			width: 100%;
			@extend .row-between;
			font-size: 22rpx;
			font-weight: 400;
			color: #B8ACA3;
			margin-top: 4upx;
		}

		.goods-name {
			width: 100%;
			font-size: 33rpx;
			font-weight: 500;
			color: #2C1101;
			margin-top: 14upx;
		}

		.goods-desc {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #B8ACA3;
			margin-top: 9upx;
		}
	}

	.card-view+.card-view {
		margin-top: 18upx;
	}

	.button-view {
		width: 100%;
		padding: 0 22upx;
		@extend .row-between;

		.options-view {
			@extend .row;

			.options-desc {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #4D0F0B;
			}

			.options-content {
				@extend .row;
				margin-left: 40upx;

				.options-item {
					width: 65rpx;
					height: 65rpx;
					@extend .row;
					border-radius: 45rpx;
					border: 1rpx solid #B7A09A;
				}

				.options-number {
					text-align: center;
					min-width: 63upx;
					padding: 0 12upx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #4D0F0B;
				}
			}
		}

		.button-item {
			width: 324rpx;
			height: 91rpx;
			@extend .column;
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
			border-radius: 45rpx;
			font-size: 29rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>